import React from 'react';

const EnvInfo: React.FC = () => {
  return (
    <div className="p-4 bg-gray-50 rounded-lg border border-border">
      <h3 className="text-lg font-semibold text-heading mb-3">环境信息</h3>
      <div className="space-y-2 text-sm">
        <div className="flex justify-between">
          <span className="text-text-secondary">环境:</span>
          <span className="font-medium">
            {import.meta.env.VITE_APP_ENV === 'development' ? '开发环境' : '生产环境'}
          </span>
        </div>
        <div className="flex justify-between">
          <span className="text-text-secondary">版本:</span>
          <span className="font-medium">{import.meta.env.VITE_APP_VERSION}</span>
        </div>
        <div className="flex justify-between">
          <span className="text-text-secondary">API地址:</span>
          <span className="font-medium text-primary">{import.meta.env.VITE_APP_API_URL}</span>
        </div>
        <div className="flex justify-between">
          <span className="text-text-secondary">基础地址:</span>
          <span className="font-medium text-primary">{import.meta.env.VITE_APP_BASE_URL}</span>
        </div>
        <div className="flex justify-between">
          <span className="text-text-secondary">请求超时:</span>
          <span className="font-medium">{import.meta.env.VITE_APP_TIMEOUT}ms</span>
        </div>
      </div>
      
      {import.meta.env.VITE_APP_ENV === 'development' && (
        <div className="mt-3 p-2 bg-yellow-50 border border-yellow-200 rounded text-xs text-yellow-800">
          <strong>开发模式提示:</strong> 当前运行在开发环境，API 请求会通过代理转发
        </div>
      )}
    </div>
  );
};

export default EnvInfo; 